<template>
    <div class="app-container">
        <el-row :gutter="16">
            <el-col :sm="12" :md="12" :lg="6">
                <el-row class="top_card ">
                    <div class="databox-right layui-col-sm9" >
                        <p class="databox-number">--</p>
                        <div class="databox-text">今日销售额（元）</div>
                    </div>
                    <div class="databox-left">
                        <img src='@/assets/img/home/jrxse.png' alt="">
                    </div>
                </el-row>
            </el-col>
            <el-col :sm="12" :md="12" :lg="6">
                <el-row class="top_card top_card2">
                    <div class="databox-right layui-col-sm9" >
                        <p class="databox-number">--</p>
                        <div class="databox-text">今日订单量（笔）</div>
                    </div>
                    <div class="databox-left">
                        <img src='@/assets/img/home/order.png' alt="">
                    </div>
                </el-row>
            </el-col>
            <el-col :sm="12" :md="12" :lg="6">
                <el-row class="el-row top_card top_card3">
                    <div class="databox-right layui-col-sm9" >
                        <p class="databox-number">--</p>
                        <div class="databox-text">本周销售额（元）</div>
                    </div>
                    <div class="databox-left">
                        <img src='@/assets/img/home/bzxse.png' alt="">
                    </div>
                </el-row>
            </el-col>
            <el-col :sm="12" :md="12" :lg="6">
                <el-row class="top_card top_card4">
                    <div class="databox-right layui-col-sm9" >
                        <p class="databox-number">--</p>
                        <div class="databox-text" >本月销售额（元）</div>
                    </div>
                    <div class="databox-left">
                        <img src='@/assets/img/home/byxse.png' alt="">
                    </div>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :md="24" :lg="12">
                <el-card class="box-card my-border-color" shadow="never" :body-style="{ borderColor: '#E6E6E6' }">
                    <div slot="header" class="clearfix my-card-header"><svg-icon icon-class="list" />商品统计</div>
                    <el-row>
                        <el-col :span="6" class="text-center"><span>22</span><br/>已上架</el-col>
                        <el-col :span="6" class="text-center"><span>22</span><br/>已下架</el-col>
                        <el-col :span="6" class="text-center"><span>22</span><br/>库存紧张</el-col>
                        <el-col :span="6" class="text-center"><span>22</span><br/>即将过期</el-col>
                    </el-row>
                </el-card>
                <el-card class="box-card my-border-color" shadow="never" :body-style="{ borderColor: '#E6E6E6' }">
                    <div slot="header" class="clearfix my-card-header"><svg-icon icon-class="list" />用户统计</div>
                    <el-row>
                        <el-col :span="6" class="text-center"><span>22</span><br/>今日新开户</el-col>
                        <el-col :span="6" class="text-center"><span>22</span><br/>本周新开户</el-col>
                        <el-col :span="6" class="text-center"><span>22</span><br/>本月新开户</el-col>
                        <el-col :span="6" class="text-center"><span>22</span><br/>总开户数</el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :md="24" :lg="12">
                <el-card class="box-card my-border-color" shadow="never" :body-style="{ borderColor: '#E6E6E6' }">
                    <div slot="header" class="clearfix my-card-header"><svg-icon icon-class="list" />待办事项</div>
                    <el-row class="little-title">会员</el-row>
                    <el-row class="little-con">
                        <el-col :span="8" class="text-center">开户审核<span>(22)</span></el-col>
                        <el-col :span="8" class="text-center">地址修改审核<span>(22)</span></el-col>
                        <el-col :span="8" class="text-center">编辑资料<span>(22)</span></el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row  class="little-title">订单</el-row>
                    <el-row class="little-con">
                        <el-col :span="8" class="text-center">待发货订单<span>(22)</span></el-col>
                        <el-col :span="8" class="text-center">待付款订单<span>(22)</span></el-col>
                        <el-col :span="8" class="text-center">催发货订单<span>(22)</span></el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-card class="box-card bg-header" shadow="never" :body-style="{ borderColor: '#E6E6E6'}">
                <div slot="header" class="clearfix my-card-header"><svg-icon icon-class="list" />销售统计</div>
                <el-row class="switch-tab">
                    <el-link type="primary" :underline="false">近7天</el-link>
                    <el-link :underline="false">近30天</el-link>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <div class="explain">
                            近7日销售额<br/>
                            ￥2222<br/>
                            环比下降10%
                        </div>
                        <div class="explain">
                            近30日销售额<br/>
                            ￥2222<br/>
                            环比下降10%
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div id="sellCharts" class="my-charts"></div>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>
        <el-row>
            <el-card class="box-card bg-header" shadow="never" :body-style="{ borderColor: '#E6E6E6'}">
                <div slot="header" class="clearfix my-card-header"><svg-icon icon-class="list" />订单统计</div>
                <el-row class="switch-tab">
                    <el-link type="primary" :underline="false">近7天</el-link>
                    <el-link :underline="false">近30天</el-link>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <div class="explain">
                            近7日销售额<br/>
                            ￥2222<br/>
                            环比下降10%
                        </div>
                        <div class="explain">
                            近30日销售额<br/>
                            ￥2222<br/>
                            环比下降10%
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div id="orderCharts" class="my-charts"></div>
                    </el-col>
                </el-row>
            </el-card>
        </el-row>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import { mapActions } from 'vuex'
    export default {
        name: 'home',
        data() {
            return {
                sellCharts: null,
                orderCharts: null
            }
        },
        mounted() {
            // this.saveEnumAllAction()
            this.initChart()
        },
        beforeDestroy() {
            if (!this.sellCharts&&!this.orderCharts) {
                return
            }
            this.sellCharts.dispose()
            this.orderCharts.dispose()
            this.sellCharts = null
            this.orderCharts = null
        },
        methods: {
            ...mapActions({
                saveEnumAllAction: 'common/saveEnumAllAction'
            }),
            initChart() {
                this.sellCharts = echarts.init(document.getElementById('sellCharts'))
                this.sellCharts.setOption(this.setOption('日期：天', '单位：元', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320]))
                this.orderCharts = echarts.init(document.getElementById('orderCharts'))
                this.orderCharts.setOption(this.setOption('日期：天', '单位：元', ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [820, 932, 901, 934, 1290, 1330, 1320]))
                window.onresize = () => {
                    this.sellCharts.resize()
                    this.orderCharts.resize()
                }
            },
            setOption(xName, yName, xData, yData) {
                return {
                    color: ['#01A1FE'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        name: xName,
                        type: 'category',
                        boundaryGap: false,
                        data: xData
                    },
                    yAxis: {
                        name: yName,
                        type: 'value'
                    },
                    series: [{
                        data: yData,
                        type: 'line',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#01A1FE'
                            }, {
                                offset: 1,
                                color: '#ffe'
                            }])
                        }
                    }]
                }
            }
        }
    }
</script>
<style scoped>
    .app-container{background: #EEEEEE}
    /*4个card展示*/
    .top_card{padding: 30px 0 28px 28px;color: #FFFFFF;border-radius: 4px;cursor: pointer;margin-bottom: 16px;
        background-image: -webkit-linear-gradient(156deg, #FF928B, #FF6085);
        background-image: -moz-linear-gradient(156deg, #FF928B, #FF6085);
        background-image: -o-linear-gradient(156deg, #FF928B, #FF6085);
        background-image: -ms-linear-gradient(156deg, #FF928B, #FF6085);
        background-image: linear-gradient(156deg, #FF928B, #FF6085);
    }
    .top_card2{
        background-image: -webkit-linear-gradient(156deg, #00E8FF, #0092EB);
        background-image: -moz-linear-gradient(156deg, #00E8FF, #0092EB);
        background-image: -o-linear-gradient(156deg, #00E8FF, #0092EB);
        background-image: -ms-linear-gradient(156deg, #00E8FF, #0092EB);
        background-image: linear-gradient(156deg, #00E8FF, #0092EB);
    }
    .top_card3{
        background-image: -webkit-linear-gradient(156deg, #3ACCBE, #1F9DD0);
        background-image: -moz-linear-gradient(156deg, #3ACCBE, #1F9DD0);
        background-image: -o-linear-gradient(156deg, #3ACCBE, #1F9DD0);
        background-image: -ms-linear-gradient(156deg, #3ACCBE, #1F9DD0);
        background-image: linear-gradient(156deg, #3ACCBE, #1F9DD0);
    }
    .top_card4{
        background-image: -webkit-linear-gradient(156deg, #DD7FE8, #8776FA);
        background-image: -moz-linear-gradient(156deg, #DD7FE8, #8776FA);
        background-image: -o-linear-gradient(156deg, #DD7FE8, #8776FA);
        background-image: -ms-linear-gradient(156deg, #DD7FE8, #8776FA);
        background-image: linear-gradient(156deg, #DD7FE8, #8776FA);
    }
    .databox-number{font-size: 36px;line-height: 29px;margin-bottom: 20px;}
    .databox-text{font-size: 18px;}
    .databox-left{position: absolute;bottom: 40px;right:20px;}
    .databox-left img{width: 100%;vertical-align: bottom}
    
    .box-card{font-size: 14px;margin-bottom: 16px;color: #666666;}
    .box-card .my-card-header{color: #4285F4;}
    .box-card .svg-icon{margin-right: 4px;}
    .text-center{text-align: center;}
    .text-center span{color: #E10202;}
    .little-title{font-size: 16px;line-height: 50px;text-align: center;}
    .little-con{padding-bottom: 10px;}
    /*近7  30天*/
    .switch-tab{text-align: right;}
    .switch-tab a{margin-right: 10px;}
    .explain{color: #666666;margin-top: 64px;line-height: 24px;}
    
    .my-charts{width: 100%;height: 400px;}
</style>
<style>
    .my-border-color .el-card__header{border-color: #4285F4;}
    .bg-header .el-card__header{background: #DEE9FD;}
</style>
